<template>
  <div class="container">
    <div class="jx-container">
      <div class="jx-table" style="padding-top: 0;">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          版本控制
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="boo.showDialog = true">添加版本</el-button>
          </div>
        </div>
        <el-table :data="versionList" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="appVersionName" label="版本名称" width="120" align="center">
          </el-table-column>
          <el-table-column prop="appVersionNo" label="版本序列" width="100" align="center">
          </el-table-column>
           <el-table-column prop="createAt" label="提交时间" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="appCatalog" label="适配机型" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="appVersionUrl" label="下载链接" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="更新说明" align="center" :show-overflow-tooltip="true">
             <template slot-scope="scope">
              <span v-text="scope.row.appVersionDesc"></span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="hiddenRow(scope.row)" type="text" size="small">撤销</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="versionList.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加版本号 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">添加版本</span>
      </div>
      <el-form ref="form" :rules="rules" :model="currentRow" label-width="110px" class="jx-form">
        <el-form-item label="版本名称" prop="appVersionName">
          <el-input v-model="currentRow.appVersionName" placeholder="请输入版本名称"></el-input>
        </el-form-item>
        <el-form-item label="版本序列" prop="appVersionNo">
          <el-input v-model="currentRow.appVersionNo" placeholder="请输入版本序列"></el-input>
        </el-form-item>
        <el-form-item label="版本链接" prop="appVersionUrl">
          <el-input v-model="currentRow.appVersionUrl" placeholder="请输入版本链接"></el-input>
        </el-form-item>
        <el-form-item label="手机类型" prop="appCatalog">
          <el-checkbox-group v-model="currentRow.appCatalog">
            <el-checkbox label="安卓">安卓</el-checkbox>
            <el-checkbox label="IOS">IOS</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="更新说明" prop="appVersionDesc">
          <el-input v-model="currentRow.appVersionDesc" placeholder="请输入更新说明" type="textarea" resize="none" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="primary" @click="boo.showDialog = false">关闭</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submit('form')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data(){
      const validateLink = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('链接地址不能为空'));
        } else {
          if (this.$reg.isDomain(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的以http或https开头的链接地址'));
          }
        }
      }      
      const validateNumber = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('版本序列不能为空'));
        } else {
          if (this.$reg.isFloat(value)) {
            callback();
          } else {
            return callback(new Error('版本序列须为数字'));
          }
        }
      }
      return {
        https: this.$api.setting.version,
        boo: {
          loading: false,
          showDialog: false,
          saveing: false,
        },
        other: {
          allRow: 1
        },
        versionList: [],
        params_list: {
          page: 1,
          size: 10
        },
        currentRow: {appCatalog: []},
        rules: {
          appVersionName: [{required: true, message: '版本名称', trigger: 'blur'}],
          appVersionNo: [{ required: true, validator: validateNumber, trigger: 'blur' }],
          appVersionUrl: [{ required: true, validator: validateLink, trigger: 'blur' }],
          appCatalog: [{ required: true, message: '请选择手机类型', trigger: 'change' }],
          appVersionDesc: [{ required: true, message: '请输入版本说明', trigger: 'blur' }]
        }
      }
    },
    mounted(){
      let _self = this
      _self.getList()
    },
    methods: {
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          orderBy: '',
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.other.allRow = Number(res.retObject.totalRow)
            _self.versionList = res.retObject.list
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list, params, success)
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      hiddenRow(item){
        let _self = this
        _self.$confirm('此操作将撤销此记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            id: item.appVersionId
          }
          let success = (res)=>{
            res = res.data
            if(res.retCode == 1){
              _self.getList()
            } else {
              _self.$message.error(res.retMsg)
            }
          }
          _self.$axios.delete(`${_self.https.put}${param.id}`, {}, success)
        }).catch(() => {}); 
      },
      submit(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            let params = {
              appVersionUrl: _self.currentRow.appVersionUrl,
              appVersionName: _self.currentRow.appVersionName,
              appVersionDesc: _self.currentRow.appVersionDesc,
              appCatalog: _self.currentRow.appCatalog,
              appVersionNo: _self.currentRow.appVersionNo
            }    
            _self.boo.saveing = true
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList()
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
              _self.boo.showDialog = false
            }
            _self.$axios.post(_self.https.add, params, success)            
					}else{
						return false
					}
				})
      },      
    },
  }

</script>

<style scoped lang="scss">
  
</style>

